import * as echarts from 'echarts/core';

/**
 * 数据分析 人员数据分析(入职/离职状况)——折线图
 * 
 * **/

const indexEchartsLine2 = (data) => {

    let xLabel = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七'];
    let dataValue =  [20, 30, 40, 35, 34, 15, 56,];
    let dataValue1 =  [40, 35, 34, 15, 56, 15, 12,];
    
    let color = ['#FD7F22', '#00f0ff']
    let datas = [
        { name: '本周入职', data: dataValue },
        { name: '本周离职', data: dataValue1 },
    ]
    
    let series = [];
        datas.forEach((item,index) => {
        let colors = color[index];
        series.push({
            name: item.name,
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            // smooth: true,
            lineStyle: {
                normal: {
                    width: 1,
                    color:colors , // 线条颜色
                },
            },
            itemStyle: {
                normal: {
                    color: colors,//拐点颜色小
                    label: {
                        show: false, //开启显示
                    },
                },
    
            },
    
            data: item.data,
        })
        series.push({
            "name": item.name,
            "data": [{
                "coords": xLabel.map( (r,idx)=> [r, item.data[idx]]),
            }],
            smooth: true,
            "type": "lines",
            "coordinateSystem": "cartesian2d",
            "zlevel": 1,
            "polyline": true,
            "symbol": "circle",
            "effect":
            {
                "show": true,
                "trailLength": 0.4,
                "symbol": "circle",
                "period": 30,
                "symbolSize": 4
            },
            "lineStyle":
            {
                
                    "color": color[index],
                    "width": 0,
                    "opacity": 0,
                    "curveness": 0
            }
        })
         
    })

    const defaultConfig = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: 'rgb(126,199,255)',
                },
            },
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, 1)",
            textStyle: {
                color: "#FFF",
            },
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '3%',
            bottom: '10%',
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#B6DAEE',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B6DAEE',
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series

    };

    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEchartsLine2
};
